<template>
    <div>
        <h1 ref="title"></h1>
        <button ref="btn" @click="showDOM">点我获取School</button>
        <School id="sch" ref="sch" />
    </div>
</template>

<!-- 
ref 获取的是 Vue.component组件实例对象
document.

ref属性
    1.被用来给元素或子组件注册或引用信息（id的替代者）
    2.getElementById获取的是真实DOM元素（标签），ref获取的是组件实例对象（vc）
    3.使用方法：
        打标识：<h1 ref="xxx"></h1>
        获取：this.$refs.xxx
-->
<script>
import Vue from 'vue';
import School from './components/School.vue';
export default Vue.extend({
    name: "App",
    components: { School },
    data() {
        return {

        }
    },
    methods: {
        showDOM() {
            console.log("getElementById方式：",document.getElementById("sch"));

            console.log("ref方式：",this.$refs.sch);

        }
    }
})
</script>